<template>
  <div class="masOrder">
    <!-- 商户来源列表 -->
    <!-- 搜索部分 -->
    <div class="search">
      <!-- 导出excel -->
      <download-excel class="excel_container" :data="tableData" :fields="json_fields" name="商户来源">
        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
        <el-button type="success" size="mini">导出EXCEL</el-button>
      </download-excel>
      <div class="block">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入商户ID/商户名称/店铺名称/店铺账号/推荐人"
          style="width: 350px"
          clearable
          @keyup.enter.native="handleSearch"
        ></el-input>
        <el-button
          size="mini"
          type="primary"
          @click="handleSearch"
          style="padding: 8px 20px;margin: 0 10px;border: none;color: #626366;background-color: #f1f1f1"
        >搜索</el-button>
      </div>
    </div>
    <div class="filtrate">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="注册时间">
          <div class="block">
            <el-date-picker
              v-model="form.register"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              style="margin-left: 12px"
              @change="handleChangeRegister"
            ></el-date-picker>
            <el-button type="primary" size="mini" @click="handleFiltrate(form)">筛选</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格部分 -->
    <div class="tableData">
      <el-table style="width: 100%;margin-bottom: 40px" :data="tableData">
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
        <el-table-column align="center" label="店铺ID" prop="user_id"></el-table-column>
        <el-table-column align="center" label="商户姓名" prop="sv_ul_name"></el-table-column>
        <el-table-column align="center" label="店铺账号" prop="sv_ul_mobile"></el-table-column>
        <el-table-column align="center" label="行业类型" prop="sv_uit_name"></el-table-column>
        <el-table-column align="center" min-width="140" label="软件版本" prop="sv_versionname"></el-table-column>
        <el-table-column align="center" label="URL关键词" prop="sv_sharechannel"></el-table-column>
        <!-- <el-table-column align="center" label="来源渠道" prop="sv_sharedby"></el-table-column> -->
        <el-table-column align="center" label="注册平台" prop="sv_regsource"></el-table-column>
        <!-- <el-table-column align="center" label="地域" prop="sms_mealprice"></el-table-column> -->
        <el-table-column align="center" min-width="160" label="注册时间" prop="sv_ul_regdate"></el-table-column>
      </el-table>
    </div>
    <!-- 这个是分页器 -->
    <Pagination
      :total="total"
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></Pagination>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      // 导出excel的数据
      json_fields: {
        店铺ID: "user_id", //支持嵌套属性
        商户姓名: "sv_ul_name",
        店铺账号: "sv_ul_mobile",
        行业类型: "sv_uit_name",
        URL关键词: "urlkeyword",
        来源渠道: "sv_sharechannel",
        注册平台: "sv_regsource",
        地域: "territory",
        注册时间: "sv_ul_regdate"
      },
      // 表格数据
      tableData: [],
      search: "",
      // 查询的数据
      form: {
        register: "",
        nreg_sdate: "", // 注册开始时间
        nreg_edate: "" // 注册结束时间
      },
      // 分页器的数据
      total: 0, // 总条数
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页数量
      // 身份令牌
      myToken: ""
    };
  },
  components: { Pagination },
  methods: {
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      // 获取订单列表,初始化列表
      this.getOrderData();
      // 格式化时间
      this.timeFormatting = this.utils.timeFormatting();
    },
    // 获取订单数据的方法
    getOrderData() {
      const urlParameter = {
        nreg_sdate: this.form.nreg_sdate,
        nreg_edate: this.form.nreg_edate,
        status: "",
        MsgNo: "",
        exp_sdate: "",
        exp_edate: "",
        sv_versionid: "",
        sv_versionname: "",
        lastloginday: "",
        storetype: "",
        multipletype: "",
        dec_payment_method: "",
        nearexpiration: "",
        sub_distributor_id: "",
        code: ""
      };
      this.$api
        .getBusinesslistings(
          this.pageIndex,
          this.pageSize,
          this.search.trim(),
          urlParameter,
          this.myToken
        )
        .then(res => {
          const { dataList, total } = res;
          this.total = total;
          this.tableData = dataList.map((v, i) => {
            // 格式化注册时间
            v.sv_ul_regdate = new Date(v.sv_ul_regdate).Format(
              "yyyy-MM-dd hh:mm:ss"
            );
            return {
              ...v
            };
          });
        });
    },
    // 格式化注册时间
    handleChangeRegister(val) {
      // console.log(val);
      if (val != null) {
        this.form.nreg_sdate = new Date(val[0]).Format("yy-MM-dd hh:mm:ss");
        this.form.nreg_edate = new Date(val[1]).Format("yy-MM-dd hh:mm:ss");
      } else {
        this.form.nreg_sdate = "";
        this.form.nreg_edate = "";
      }
    },
    // 搜索的方法
    handleSearch() {
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 进行筛选
    handleFiltrate(val) {
      this.form = val;
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 分页器的方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrderData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOrderData();
    },
    // 筛选的方法
    handleFiltrate() {
      this.pageIndex = 1;
      this.getOrderData();
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.masOrder {
  background-color: #fff;
  padding: 20px;
  .search {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .filtrate {
    padding: 5px 10px;
    background-color: #f1f1f1;
    margin-bottom: 20px;
    .el-radio-button {
      margin-right: 10px;
    }
    .block {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  // 表格表头
  .tableData @{deep} .el-table th {
    background-color: #fafafa;
    color: #252525;
    font-weight: 100;
  }
  // 弹出框的样式
  .recallDetail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    .content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
    }
    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      color: #666;
      font-size: 20px;
    }
  }
  // 筛选每一项
  .filtrate @{deep} .el-form-item {
    margin-bottom: 0;
  }
  // 筛选项的标题
  .filtrate @{deep} .el-form-item__label {
    color: #000;
    font-weight: 600;
  }
  // 筛选项的选项
  .filtrate @{deep} .el-radio-button__inner {
    border: 1px solid #f1f1f1;
    background-color: #f1f1f1;
    font-size: 14px;
    color: #626366;
  }
  // 筛选项的选中项
  .filtrate @{deep} .is-active .el-radio-button__inner {
    background-color: #f1f1f1;
    border: 1px solid #66b1ff;
    box-shadow: unset;
    color: #666;
    border-radius: 4px;
  }
}
</style>